<template>
  <div class="tech-counter">
    <div class="counter-body">
      <div class="number-display">
        <transition-group name="digit" tag="div" class="digits-wrapper">
          <div
            v-for="(digit, index) in displayDigits"
            :key="index"
            class="digit-card"
            :data-digit="digit"
          >
            <div class="digit-container">
              <div class="digit-value">{{ digit }}</div>
            </div>
          </div>
        </transition-group>
        <div class="counter-unit">{{ activeColorPieces }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleCounter',
  props: {
    count: {
      type: Number,
      required: true,
      default: 0
    },
    type: {
      type: String,
      default: '人数'
    },
    // 新增：控制动画时长的属性
    animationDuration: {
      type: Number,
      default: 600 // 动画持续时间，单位ms
    }
  },
  data() {
    return {
      displayDigits: ['0'],
      updateTime: this.getCurrentTime(),
      currentDate: this.getCurrentDate(),
      tips1: '人',
      tips2: '%',
      // 用于记录上一次的数字，帮助实现更流畅的动画
      previousDigits: ['0']
    }
  },
  watch: {
    count: {
      immediate: true,
      handler(newVal) {
        this.updateDigits(newVal)
        this.updateTime = this.getCurrentTime()
      }
    }
  },
  computed: {
    activeColorPieces() {
      return this.type === '人数' ? this.tips1 : this.tips2;
    }
  },
  methods: {
    updateDigits(newVal) {
      // 保存当前数字作为上一次的数字
      this.previousDigits = [...this.displayDigits];

      // 处理数字，确保是字符串格式
      const numStr = String(Math.max(0, newVal)); // 确保不会出现负数
      this.displayDigits = numStr.split('');
    },
    getCurrentTime() {
      const now = new Date()
      return now.toLocaleTimeString()
    },
    getCurrentDate() {
      const now = new Date()
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return now.toLocaleDateString('zh-CN', options)
    }
  },
  mounted() {
    // 初始化动画持续时间的CSS变量
    document.documentElement.style.setProperty(
      '--animation-duration',
      `${this.animationDuration}ms`
    );
  },
  updated() {
    // 当数字更新时，触发动画重绘
    const digitCards = this.$el.querySelectorAll('.digit-card');
    digitCards.forEach(card => {
      // 触发重绘
      card.offsetHeight;
      card.classList.add('animate');
      // 动画结束后移除类
      setTimeout(() => {
        card.classList.remove('animate');
      }, this.animationDuration);
    });
  }
}
</script>

<style scoped>
/* 定义CSS变量用于动画时长 */
:root {
  --animation-duration: 600ms;
}

.tech-counter {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  color: #333;
}

.counter-body {
  padding: 0px;
}

.number-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.digits-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.digit-card {
  width: 60px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  background-image: url('../../assets/images/rennumlbg.png');
  background-size: 100% 100%;
  perspective: 200px; /* 添加3D透视 */
}

.digit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.digit-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.digit-value {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  transition: opacity var(--animation-duration) ease;
}

/* 数字变化动画效果 */
.digit-card.animate .digit-container {
  animation: digitFlip var(--animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes digitFlip {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-15deg) scale(0.95);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* 数字添加/移除动画 */
.digit-enter-from,
.digit-leave-to {
  opacity: 0;
  transform: scale(0.8) translateY(10px);
}

.digit-enter-active {
  transition: all var(--animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.digit-leave-active {
  transition: all calc(var(--animation-duration) * 0.7) ease-in;
  position: absolute;
}

.digit-move {
  transition: transform var(--animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.counter-unit {
  font-size: 34px;
  margin-left: 15px;
  color: #fff;
  font-weight: 500;
  transition: all var(--animation-duration) ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tech-counter {
    border-radius: 12px;
  }

  .counter-body {
    padding: 20px;
  }

  .digit-card {
    width: 40px;
    height: 60px;
  }

  .digit-value {
    font-size: 32px;
  }

  .counter-unit {
    font-size: 20px;
  }
}
</style>
